<template>
  <div class="learnInformation">
    <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
    <span>
      <el-button @click="$router.push('/bscroll')" type="info">scroll</el-button>
      <el-button @click="$router.push('/echarts')" type="info">echarts</el-button>
      <el-button @click="$router.push('/allskill')" type="info">smallSkill</el-button>
    </span>
    <div>
      <img src="./../../public/cloud.jpg" alt />
    </div>
    <div class="learnCard">
      <div class="block">
        <el-timeline>
          <el-timeline-item timestamp="01" placement="top" color="skyblue">
            <el-card>
              <h4>PHP基础</h4>
              <p>更新于 2020/8/13/21:39</p>
              <i @click="open" class="showOpen" :class="{changColor:changeColor}"></i>
              <transition name="fade">
                <ol class="learnInfo" v-show="isShow">
                  <li>
                    <h6>key和value</h6>
                    <img src="./../../public/learnImage/1.png" alt />
                    <p>访问的时候</p>
                    <img src="./../../public/learnImage/2.png" />
                    <p>布尔值true为1；false为空的字符串 ;count是计算器;松散比较==（只比较值，不比较类型） 严格模式值和类型都要比较===</p>
                    <br />
                    <i>点号是连接字符串和变量;</i>
                    <em>条件语句 if......elseif......else break是跳出整个循环 continue是放弃当前，继续下一个</em>
                    <p>函数 注意传字符串过去的时候要用双引号 输出的是变量的时候要用{}包裹</p>
                    <img src="./../../public/learnImage/3.png" alt />
                    <p>变量作用域 局部想要使用全局的变量要加global+ 变量名，当使用全局变量的时候，变量名发生更改也会随着改变</p>
                    <img src="./../../public/learnImage/4.png" alt />
                    <p>include 和 require都是引入文件的；不同的是include加载失败继续执行，而require不会</p>
                    <img src="./../../public/learnImage/5.png" alt />
                    <img src="./../../public/learnImage/6.png" alt />
                  </li>
                </ol>
              </transition>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top" color="pink">
            <el-card>
              <h4>PHP练习</h4>
              <p>更新于 2020/8/14/23:08</p>
              <i @click="isShow1=!isShow1" class="showOpen" :class="{changColor:changeColor}"></i>
              <ul v-show="isShow1">
                <li>
                  <h3>小项目</h3>
                  <p>开始：创建三个文件夹,分别引入;其中要对html内容进行分离制作</p>
                  <div v-for="(item,index) in imageAddress" :key="index">
                    <img :src="item.images" />
                    <div>{{item.a}}</div>
                  </div>
                </li>
              </ul>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top" color="blue">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "learnInfo",
  data() {
    return {
      isShow: false,
      isShow1: false,
      changeColor: false,
      info: [5, 20, 36, 10, 10, 20],
      imageAddress: [
        {
          images: require("./../../public/learnImage/activety/1.jpg"),
          a: "主文件夹",
        },
        {
          images: require("./../../public/learnImage/activety/2.jpg"),
          a: "header",
        },
        {
          images: require("./../../public/learnImage/activety/3.jpg"),
          a: "footer",
        },
        {
          images: require("./../../public/learnImage/activety/4.jpg"),
          a: "从index中变换过来的，可以重定向回去",
        },
      ],
    };
  },
  methods: {
    open() {
      this.isShow = !this.isShow;
      this.changeColor = !this.changeColor;
    },
  },
};
</script>
<style lang="less" scoped>
.learnCard {
  position: absolute;
  top: 50px;
  left: 3%;
}
.el-icon-arrow-left {
  font-size: 27px;
  position: relative;
  padding-right: 20px;
  top: 5px;
}
.el-card {
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}
.learnInfo {
  text-align: center;
  font-weight: 900;
  width: 100%;
  height: 100%;
  background-color: rgba(86, 211, 225, 0.5);
  color: rgb(225, 225, 225);
  p {
    padding: 20px 0;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.showOpen {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 10px;
  background-color: #eee;
  border-radius: 50%;
}
.changColor {
  background-color: red;
  width: 10px;
  height: 10px;
}
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bScroll {
  position: relative;
  left: 30%;
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
